<table id="dg" class="easyui-datagrid" style="width:700px;height:500px" toolbar=".toolbar"
       data-options="fitColumns:true,singleSelect:true, rownumbers:true" title="联系人列表">

    <thead>
    <tr>
        <th data-options="field:'code',width:100">Code</th>
        <th data-options="field:'name',width:100">Name</th>
    </tr>
    </thead>
</table>
<div class="toolbar">
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">添加</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">编辑</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="delUser()">删除</a>
    查找:<input class="search"></input>
    <div id="mm" style="width:120px">
        <!--
          <div name="all" iconCls="icon-ok">All News</div>
          <div name="sports">Sports News</div>
        -->
    </div>
</div>
<div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
     closed="true" buttons="#dlg-buttons">
    <div class="ftitle">User Information</div>
    <form id="fm" method="post" novalidate>
        <div class="fitem">
            <label>code:</label>
            <input name="code" class="easyui-validatebox" required="true">
        </div>
        <div class="fitem">
            <label>Name:</label>
            <input name="name" class="easyui-validatebox" required="true">
        </div>

    </form>
</div>
<div id="dlg-buttons">
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">Save</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>
</div>
<script>
    $('#dg').datagrid({
        pagination:true,
        url:'data.php',
        onDblClickCell: function(index,field,value){



            //$(this).datagrid('beginEdit', index);
            //var ed = $(this).datagrid('getEditor', {index:index,field:field});
            //$(ed.target).focus();
        }

    });
    $('.search').searchbox({
         width:200,
              searcher:function(value,name){
               //alert(value + "," + name);
               $('#dg').datagrid('reload',{
                   id: 1
               });    // reload the user data
          },
      //menu:'#mm',
       prompt:'输入关键字'
     });
    function delUser(){
        var row = $('#dg').datagrid('getSelected');
        if (row){
            $.messager.confirm('确定删除吗？','确定要删除'+row.code+'?',function(r){
                if (r){
                    $.post('handle.php',{id:row.code},function(result){
                        if (result.success){
                            $('#dg').datagrid('reload');    // reload the user data
                        } else {
                            $.messager.show({    // show error message
                                title: '提示',
                                msg: result.errorMsg
                            });
                        }
                    },'json');
                }
            });
        }
    }
    function newUser(){
        add_ajax_tab('添加用户','form.html');
//       $('#dlg').dialog('open').dialog('setTitle','New User');
//       $('#fm').form('clear');
//       url = 'save_user.php';
    }
    function editUser(){
        var row = $('#dg').datagrid('getSelected');
        if (row){
            $('#dlg').dialog('open').dialog('setTitle','Edit User');
            $('#fm').form('load',row);
            url = 'data.php?id='+row.code;
        }
    }

    function saveUser(){
        $('#fm').form('submit',{
            url: url,
            onSubmit: function(){
                return $(this).form('validate');
            },
            success: function(result){
                var result = eval('('+result+')');
                if (result.errorMsg){
                    $.messager.show({
                        title: 'Error',
                        msg: result.errorMsg
                    });
                } else {
                    $('#dlg').dialog('close');        // close the dialog
                    $('#dg').datagrid('reload');    // reload the user data
                }
            }
        });
    }
</script>
</div>